<template>
    <div class="container">
        <div class="NP_header">
                <ul>
                    <li>
                        发布在
                        <select name="dizhi" id="adress" style="width:100px">
                            <option value="北京">北京</option>
                            <option value="河南">河南</option>
                        </select>
                    </li>
                    <li>
                         类别显示下  
                        <select name="dizhi" id="adress" style="width:150px">
                            <option value="全部招聘">全部招聘</option>
                            <option value="兼职招聘">兼职招聘</option>
                        </select>
                    </li>
                </ul>

        </div>
        <div class="NP_main">
            <div class="layout3">
                <table>
                    <br>
                    <tr>
                        <td>职位标题&nbsp;<input type="text" class="input-1"></td>
                    </tr>
                    <tr>
                        <td>职位类别&nbsp;<input type="text" class="input-1"></td>
                    </tr>
                    <tr>
                        <td>招聘人数&nbsp;<input type="text" class="input-1"></td>
                    </tr>
                    <tr>
                        <td>学历&nbsp;<input type="text" class="input-1"></td>
                    </tr>
                    <tr>
                        <td>工作年限&nbsp;<input type="text" class="input-1"></td>
                        <template>
                            <el-checkbox v-model="checked" style="margin-left: 10px;padding-top: 15px;">应届生</el-checkbox>
                        </template>
                    </tr>
                    <tr>
                        <td>年龄&nbsp;<input type="text" class="input-1"></td>
                    </tr>
                    <tr>
                        <td>月薪&nbsp;<input type="text" class="input-1"></td>
                        <template>
                            <el-checkbox v-model="checked1" style="margin-left: 10px;padding-top: 15px;">有试用期</el-checkbox>
                        </template>
                    </tr>
                    <tr>
                        <td>工作时间&nbsp;<input type="text" class="input-1"></td>
                    </tr>
                </table>              
            </div>
            <div class="layout4">
                <h2>职位职责</h2>
                <input type="text" style="width:400px;height:300px;">
            </div>
            <div class="layout5">
                <br>
                <meat style="font-size:18px;">任职要求</meat>
                <br>
                <input type="text" style="width:400px;height:140px;">

                <br>
                <br>
                <meat style="font-size:18px;">技能标签</meat>
                <div class="jineng">
                    <ul>
                        <li>
                            <template>
                                <el-checkbox v-model="checked3" style="margin-left: 10px;padding-top: 15px;">IOS</el-checkbox>
                            </template>
                        </li>
                        <li>
                            <template>
                                <el-checkbox v-model="checked4" style="margin-left: 10px;padding-top: 15px;">JAVA</el-checkbox>
                            </template>                            
                        </li>
                        <li>
                            <template>
                                <el-checkbox v-model="checked5" style="margin-left: 10px;padding-top: 15px;">python</el-checkbox>
                            </template>                           
                        </li>
                        <li>
                            <template>
                                <el-checkbox v-model="checked6" style="margin-left: 10px;padding-top: 15px;">vue</el-checkbox>
                            </template>                           
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <template>
                                <el-checkbox v-model="checked7" style="margin-left: 10px;padding-top: 15px;">C语言</el-checkbox>
                            </template>
                        </li>
                        <li>
                            <template>
                                <el-checkbox v-model="checked8" style="margin-left: 10px;padding-top: 15px;">PHP</el-checkbox>
                            </template>                            
                        </li>
                        <li>
                            <template>
                                <el-checkbox v-model="checked9" style="margin-left: 10px;padding-top: 15px;">mysql</el-checkbox>
                            </template>                           
                        </li>
                        <li>
                            <template>
                                <el-checkbox v-model="checked10" style="margin-left: 10px;padding-top: 15px;">springBoot</el-checkbox>
                            </template>                           
                        </li>
                    </ul>
                </div>
            <br>
            <meat style="font-size:18px;">技能标签</meat>
                <div class="fuli"> 
                    <ul>
                        <li>
                            <template>
                                <el-checkbox v-model="checked11" style="margin-left: 30px;padding-top: 15px;">五险一金</el-checkbox>
                            </template>
                        </li>
                        <li>
                            <template>
                                <el-checkbox v-model="checked12" style="margin-left: 10px;padding-top: 15px;">交通补助</el-checkbox>
                            </template>                            
                        </li>
                        <li>
                            <template>
                                <el-checkbox v-model="checked13" style="margin-left: 10px;padding-top: 15px;">住房补助</el-checkbox>
                            </template>                           
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <template>
                                <el-checkbox v-model="checked14" style="margin-left: 30px;padding-top: 15px;">年底双薪</el-checkbox>
                            </template>
                        </li>
                        <li>
                            <template>
                                <el-checkbox v-model="checked15" style="margin-left: 10px;padding-top: 15px;">花费补助</el-checkbox>
                            </template>                            
                        </li>
                        <li>
                            <template>
                                <el-button style="margin-left:10px;margin-top:10px;">自定义</el-button>
                            </template>                           
                        </li>                    
                    </ul>
                </div>
            </div>
            </div>


        <div class="NP_footer">
                <el-button @click="baocun">保存</el-button>
                <el-button>取消</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name:'Newpost',
    data() {
      return {
        checked: false,
        checked1: false,
        checked2: false,
        checked3: false,
        checked4: false,
        checked5: false,
        checked6: false,
        checked7: false,
        checked8: false,
        checked9: false,
        checked10: false,
        checked11: false,
        checked12: false,
        checked13: false,
        checked14: false,
        checked15: false,
      };
    },
    methods: {
        baocun(){
            alert("保存成功")
        },
    },
}
</script>

<style lang="scss">
.container {
    width: 100%;
    margin: 0 auto;
}
.NP_header {
    width: 1050px;
    height: 65px;
    margin: 0 auto;
    // border: 1px solid red; 
}

.NP_header ul>li{
    float: left;
    list-style-type: none;
    margin: 0px -150px 0px 250px;
    font-size: 20px;
    z-index: 1;

}
.NP_main  {
    width: 1050px;
    height: 1500px;
    text-align: center;
    margin: 0 auto;
}

.NP_main  .layout3{
    width: 600px;
    height: 370px;
    background-color: #F8F6F6;
    text-align: center;
    display: inline-block;
}
.NP_main  .layout3 table>tr>td{
    text-align: right;
    height: 40px;
    width: 420px;
}
.NP_main  .layout3 table>tr>td .el-checkbox{
    padding: 10px 10px 10px 10px ;
}
.NP_main  .layout4{
    width: 600px;
    height: 380px;
    background-color: #F8F6F6;
    margin: 60px 0px 0px 230px ;
}
.NP_main  .layout5{
    width: 600px;
    height: 580px;
    background-color:#F8F6F6;
    margin: 60px 0px 0px 230px ;
}
.NP_main  .layout5 .jineng{
    width: 400px;
    height: 115px;
    background-color: white;
    margin: 0px 0px 0px 100px ;
    }
.NP_main  .layout5 .jineng ul>li{
    list-style-type: none;
    font-size: 12px;
    float: left;
    margin-left: 20px;
}

.NP_main  .layout5 .fuli{
    width: 400px;
    height: 115px;
    background-color: white;
    margin: 0px 0px 0px 100px ;
    }
.NP_main  .layout5 .fuli ul>li{
    list-style-type: none;
    font-size: 12px;
    float: left;
    margin-left: 20px;
}
 .input-1{
     width: 200px;
 }

.NP_footer{
    width: 100%;
    height: 50px;
}
</style>
